<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { busListStore, useMemberStore } from '@/stores'
import { getBusCashFlowListAPI, getBusinessCashApproveAmountAPI } from '@/api/business'
import type { CashFlowEntityItem } from '@/types/business'
import defauleAv from '@/static/images/default-img.jpg'
import {baseURL} from "@/utils/http";
import {getUserInfoByIdAPI, postLoginWxMinAPI} from "@/api/account";
import { userItem } from "@/types/member";
import NoList from '@/components/NoList.vue'
const busStore = busListStore()
const memberStore = useMemberStore()

// 待提现金额
const cashAmout = ref<string>('0')
const getBusinessCashAmount = async () => {
  if (memberStore.profile) {
    const res = await getBusinessCashApproveAmountAPI(memberStore.profile.userId)
    cashAmout.value = res.data as string
  }
}

// 交易列表
const busCashFlowList = ref<CashFlowEntityItem[]>([])
const getBusCashFlowList = async () => {
  if (busStore.busList.length > 0) {
    const res = await getBusCashFlowListAPI(memberStore.profile.userId)
    busCashFlowList.value = res.data
  }
}
let profile = ref<userItem>({})

// 获取个人信息
const getMemberProfileData = async () => {
  if (memberStore.profile) {
    const res = await getUserInfoByIdAPI(memberStore.profile.userId)
    profile.value = res.data

  } else {
    uni.navigateTo({ url: '/pages/login/login' })
    // const rescode = await wx.login()
    // const {code} = rescode
    // const loginrRes = await postLoginWxMinAPI(code)
    // profile.value = loginrRes.data.appUser
  }
  if (profile.value.avatar?.includes('http')) {
    console.log(profile)
  } else {
    profile.value.avatar = baseURL + profile.value.avatar
  }
}
onMounted(async () => {
  await getMemberProfileData()
  getBusinessCashAmount()
  getBusCashFlowList()
})
</script>

<template>
  <scroll-view class="viewport" scroll-y enable-back-to-top>
    <view class="profile_money" v-if="memberStore.profile">
      <image class="avatar" mode="aspectFill" v-if="profile.avatar" :src="profile.avatar"></image>
      <image class="avatar" :src="defauleAv" v-else mode="scaleToFill" />
      <view class="right">
        <view class="account"><text class="nickname">{{ memberStore.profile.nickname?memberStore.profile.nickname:memberStore.profile.username }}</text> 账户金额（元） </view>
        <view class="contact">
          <view class="money">{{ Number(cashAmout).toFixed(2) || 0 }}</view>
          <navigator url="/pages/withdrawal/withdrawalBusiness" class="money_btn">提现 > </navigator>
        </view>
      </view>
    </view>
    <!-- 交易明细 -->
    <view class="choujiang">
      <view class="title">
        <text>交易明细</text>
        <navigator url="/pages/withdrawalList/withdrawalList">提现明细 > </navigator>
      </view>
      <template v-if="busCashFlowList && busCashFlowList?.length > 0">
        <uni-list-item
          :title="item.flowType=='1'?'商家佣金':item.flowType=='2'?'中奖返金':item.flowType=='4'?'中奖返金':'用户提现'"
          :note="item.createTime"
          thumb="/static/images/default_avaut.jpg"
          :avatar-circle="true"
          v-for="item in busCashFlowList"
          :key="item.id"
        >
          <template v-slot:footer>
            <view class="chat-custom-right">
              <text class="chat-custom-text add">{{ item.flowType=='7'?'-':'+' }} {{ item.flowPrice }}</text>
              <!-- <text class="chat-custom-text2">{{item.flowType=='1'?'商家佣金':item.flowType=='2'?'中奖返金':item.flowType=='4'?'中奖返金':'用户提现'}}</text> -->
            </view>
          </template>
        </uni-list-item>
      </template>
      <no-list v-else />
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  height: 100%;
}

/* 用户信息 */
.avatar {
  width: 70px;
  height: 70px;
  margin-right: 10px;
  border-radius: 50%;

}
.profile_money {
  background-image: url('../../static/images/order_bg.png');
  background-size: 100% auto;
  background-color: rgb(0, 206, 170);
  padding: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
  }

  .account {
    margin-bottom: 20rpx;
    font-size: 28rpx;
  }

  .money {
    font-size: 30px;
  }
  .money_btn {
    padding-bottom: 5px;
    font-size: 28rpx;
  }
  .contact {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.title {
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background-color: #fff;
  font-weight: normal;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}
.tixian {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(0, 206, 170);
  border-top: 1px solid rgb(174, 218, 210);
}
.tixian text {
  color: #fff;
  font-size: 30rpx;
}
.tixian button {
  margin: 0;
}

.choujiang {
  .chat-custom-right {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }

  .chat-custom-text {
    font-size: 14px;
  }
  .chat-custom-text2 {
    font-size: 12px;
    color: #999;
  }

  .minus {
    color: #333;
  }
  .add {
    color: red;
  }
  .uni-list-chat__content-title {
    font-size: 14px;
  }
  .uni-list-item__icon-img {
    border-radius: 5px;
  }
}
</style>
